<template>
<el-scrollbar>
          <el-table :data="tableData">
            <el-table-column prop="id" label="ID" width="60" />
            <el-table-column prop="no" label="账号" width="180" />
            <el-table-column prop="name" label="姓名" width="180" />
            <el-table-column prop="age" label="年龄" width="60"/>
            <el-table-column prop="sex" label="性别" width="60">
            <template #default="scope">
            <el-tag
            :type="scope.row.sex === 1 ? 'primary' : 'success'"
            disable-transitions
            >{{scope.row.sex === 1 ? '男' : '女' }}</el-tag
            >
            </template>
            </el-table-column>
            <el-table-column prop="roleId" label="用户权限" width="120">
                <template #default="scope">
            <el-tag
            :type="scope.row.roleId === 0 ? 'danger' : (scope.row.roleId === 1 ?'primary':'success')"
            disable-transitions
            >{{scope.row.roleId === 0 ? '超级管理员' : (scope.row.roleId === 1 ?'管理员':'用户') }}</el-tag
            >
            </template>
            </el-table-column>
            <el-table-column prop="operate" label="操作" >
                <template #default="scope">
                    <el-button type="success" @click="mod(scope.row)">编辑</el-button>
                    <el-button type="danger" @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>

          </el-table>
        </el-scrollbar>
        <el-dialog v-model="centerDialogVisible" title="编辑" width="30%" center>
            <el-form :model="form" label-width="120px">
            <el-form-item label="账号">
                <el-input v-model="form.no" />
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="form.password" />
            </el-form-item>
            <el-form-item label="名字">
                <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="年龄">
                <el-input v-model="form.age" />
            </el-form-item>
            <el-form-item label="性别">
            <el-radio-group v-model="form.sex">
                <el-radio label="1" >男</el-radio>
                <el-radio label="0" >女</el-radio>
            </el-radio-group>
            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="form.phone" />
            </el-form-item>

            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="domode">
                    确认
                    </el-button>
                </span>
            </template>
        </el-dialog>
</template>
    
    <script>
    import { ref } from 'vue'
    import { TableColumnCtx, TableInstance } from 'element-plus'
    import axios from 'axios';
    export default {
      name:"Main",
      data() {
      return {
        tableData: [],
        centerDialogVisible:false,
        form:{
            no:'',
            name:'',
            password:'',
            age:'',
            phone:'',
            sex:''
        },
      }
      
    },
    methods:{
        loadGet(){
            axios.post('http://localhost:8090/user/listP',{}).then(res=>res.data).then(res=>{
                console.log('测试2')
                console.log(res)
                if(res.code==200){
                    this.tableData=res.data
                }else{
                    alert('获取数据失败')
                }
                
            }) 
            console.log("测试！！！！！！");
        },
        mod(row){
            this.form.id=row.id
            this.form.no=row.no
            this.form.name=row.name
            this.form.password=''
            this.form.age=row.age+''
            this.form.sex=row.sex+''
            this.form.phone=row.phone
            this.centerDialogVisible=true
            console.log(row)

        },
        del(row){
            this.form.id=row.id
            this.form.no=row.no
            this.form.name=row.name
            this.form.password=''
            this.form.age=row.age+''
            this.form.sex=row.sex+''
            this.form.phone=row.phone
            axios.get('http://localhost:8090/user/delete'+'?id='+row.id).then(res=>res.data).then(res=>{
                this.loadGet();
                console.log(res);
            }) 
        },
        domode(){
            axios.post('http://localhost:8090/user/mod',this.form).then(res=>res.data).then(res=>{
                console.log(this.form)
                this.centerDialogVisible=false
                this.loadGet();
                console.log(res);
            }) 
        },
        loadPost(){
          axios.post('http://localhost:8090/user/listP',{}).then(res=>res.data).then(res=>{
                console.log(res);
            }) 
        }
    },
    beforeMount(){
        this.loadGet();
    }
    }
    </script>
    
    <style scoped>
        .dialog-footer button:first-child {
             margin-right: 10px;}
    </style>